<template>
    <div class="wrap">
      <h1 class="title"><span class="gradient-text">NFC 绑定</span></h1>
  
      <!-- 绑定区 -->
      <div class="editor-card">
        <el-form label-width="100px">
          <el-form-item label="NFC 编号">
            <el-input v-model="nfcId" placeholder="贴卡后自动填充或手动输入" />
          </el-form-item>
          <el-form-item label="选择页面">
            <el-select v-model="pageId" placeholder="请选择要绑定的页面" style="width:100%">
              <el-option
                v-for="p in pageList"
                :key="p.id"
                :label="p.title"
                :value="p.id" />
            </el-select>
          </el-form-item>
          <el-button type="primary" class="m-t full" @click="doBind">立即绑定</el-button>
        </el-form>
      </div>
  
      <!-- 已绑定列表 -->
      <div class="list-card">
        <h3>已绑定列表</h3>
        <el-table :data="list" stripe style="width: 100%">
          <el-table-column prop="nfcId" label="NFC 编号" />
          <el-table-column prop="title" label="页面标题" />
          <el-table-column prop="bindTime" label="绑定时间" />
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" @click="doUnbind(scope.row.nfcId)">解绑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </template>
  
  <script>
  import { getPageDropdown, bindNfc, unbindNfc, getNfcList } from '../../api/index'
  
  export default {
    data() {
      return {
        nfcId: '',
        pageId: null,
        pageList: [],
        list: []
      }
    },
    created() {
      this.loadPage()
      this.loadList()
    },
    methods: {
      async loadPage() {
        const res = await getPageDropdown()
        this.pageList = res.data
      },
      async loadList() {
        const res = await getNfcList()
        this.list = res.data
      },
      async doBind() {
        if (!this.nfcId || !this.pageId) {
          this.$message.warning('请填写 NFC 编号并选择页面')
          return
        }
        await bindNfc({ nfcId: this.nfcId, pageId: this.pageId });
        this.$message.success('绑定成功')
        this.nfcId = ''
        this.pageId = null
        this.loadList()
      },
      async doUnbind(nfcId) {
        await this.$confirm('确认解绑？', '提示', { type: 'warning' })
        await unbindNfc({nfcId:nfcId})
        this.$message.success('已解绑')
        this.loadList()
      }
    }
  }
  </script>
  
  <style scoped>
  .list-card {
    margin-top: 40px;
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.18);
  }
  </style>